<template>
	<a-layout-header class="header" style="padding: 0px; height: 48px; line-height: 48px">
		<div class="left">
			<img class="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="logo" />
			<h1>Ant Design Pro</h1>
		</div>
		<div class="right">
			<a-dropdown>
				<a @click.prevent style="color: #fff; line-height: 48px">
					<TwitterCircleFilled :style="{ fontSize: '25px', verticalAlign: 'middle', color: '#ffffff' }" />
					{{ usernName }}
					<DownOutlined />
				</a>
				<template #overlay>
					<a-menu @click="menuClick">
						<a-menu-item key="/User/Account"> <user-outlined /> 基本设置 </a-menu-item>
						<a-menu-item key="/User/Password"> <setting-outlined /> 修改密码 </a-menu-item>
						<a-menu-divider />
						<a-menu-item key="3" @click="fun_outLogin"> <login-outlined /> 安全退出 </a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
		</div>
	</a-layout-header>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			usernName: localStorage.getItem('UserName1'),
		};
	},
	methods: {
		fun_outLogin: function () {
			localStorage.removeItem('Token');
			localStorage.removeItem('UserName1');
			localStorage.removeItem('Userid');
			location.href = '/login';
		},
		/**
		 * @function 点击菜单事件
		 * @param {*} item
		 */
		menuClick: function (item) {
			this.$router.push(item.key);
		},
	},
};
</script>
